<template>
  <div class="isZan-container">
    <span @click="addLike()" :class="{'isLike':likeInfo.isCollection}" class="container-inner">
      <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
        <span class="addOne" v-if="isLike">+1</span>
        <span class="cancleOne" v-if="like">-1</span>
      </transition>
      <i :class="[{'isLike':likeInfo.isCollection}]" class="icon-dianzan iconfont-user icon"></i>
      <template v-if="type=='news'">{{likeInfo.newsCollection}}</template>
      <template v-else-if="type=='comm'">{{likeInfo.commCollection||''}}</template>
    </span>
  </div>
</template>

<script>
import { addCollection_user, delCollection_user } from "../../ajax/index";
export default {
  name: "isLike",
  data() {
    return {
      isLike: false, // 点赞+1
      like: false // 点赞-1
    };
  },
  props: {
    likeInfo: {
      type: Object,
      default: () => {
        return {};
      }
    },
    /**
     * news  新闻
     * comm  评论
     */
    type: {
      type: String,
      default: "news"
    }
  },

  methods: {
    //点击增加收藏和点赞（动画和样式）
    addLike() {
      //判断是点赞
      let userId = this.$store.getters["getuserInfo"].userId;
      if (!userId) {
        return;
      }
      let param = {
        userId: userId,
        type: this.type
      };
      if (this.type == "news") {
        param.id = this.likeInfo.newsId;
      } else {
        param.id = this.likeInfo.commId;
      }
      if (!this.likeInfo.isCollection) {
        addCollection_user(param)
          .then(res => {
            if (res.code) {
              this.isLike = !this.isLike;
              this.$message({
                message: "谢谢您的点赞",
                type: "success",
                duration: 800
              });
              this.$emit("getArticleDetail", param);
            } else {
              this.$message({
                message: "点赞失败",
                type: "fail",
                duration: 500
              });
            }
          })
          .catch(function() {
            this.$message({
              message: "点赞失败",
              type: "fail",
              duration: 500
            });
          });
      } else {
        delCollection_user(param).then(res => {
          if (res.code) {
            this.like = !this.like;
            this.$message({
              message: "已取消点赞",
              type: "success",
              duration: 800
            });
            this.$emit("getArticleDetail", param);
          } else {
            this.$message({
              message: "取消点赞失败",
              type: "fail",
              duration: 500
            });
          }
        });
      }
    },
    beforeEnter(el) {
      //动画开始进入前
      el.style.transform = "translate(0,0)";
    },
    enter(el, done) {
      // console.log(el);
      //动画执行时
      el.offsetWidth;
      el.style.transform = "translate(10px,-22px)";
      el.style.transition = "all 0.6s ease";
      done();
    },
    afterEnter(el) {
      //动画结束时
      if (this.like) {
        this.like = !this.like;
      } else {
        this.isLike = !this.isLike;
      }
    }
  }
};
</script>

<style  lang="scss">
.isZan-container {
  cursor: pointer;
  font-size: 14px;
  color: grey;
  display: flex;
  align-items: center;
  align-content: center;
  .container-inner {
    position: relative;

    .isLike {
      // 点击后，图标选中样式
      color: #ff3300;
    }

    .addOne {
      // 动画+1
      position: absolute;
      right: 0;
      top: 0px;
      font-size: 20px;
      font-weight: bold;
      color: #ff3300;
    }

    .cancleOne {
      // -1的样式
      position: absolute;
      right: 0;
      top: 0;
      font-size: 20px;
      font-weight: bold;
      color: darkgreen;
    }

    i {
      font-size: 20px;
    }
  }

  .container-inner:hover {
    /* color green */
    /* font-size: 16px; */
    color: #4b5a75;
    font-size: 14px;
    /* margin-right: 20px; */
  }
  .icon {
    margin-right: 0px;
  }
}
</style>